<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>灯光</title>
    <link rel="stylesheet" href="css/base.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>
        .center_trap {
            width: 1200px;
            min-width: 1200px;
            height: 700px;
            margin: 0 auto;
            position: relative;
        }

        .center_trap nav {
            width: 350px;
            height: 700px;
            float: left;
            overflow: hidden;
            background-color: rgb(238, 236, 236);
        }

        .center_trap nav .main_page {
            width: 100px;
            height: 100px;
            margin-left: 125px;
            margin-top: 20px;
            margin-bottom: 30px;
            left: 50%;
        }

        .center_trap nav .kg {
            width: 150px;
            height: 200px;
            text-align: center;
            margin-left: 100px;
            margin-top: 30px;
            font-size: 20px;
            color: black;
        }

        .center_trap nav .oc {
            width: 150px;
            height: 150px;

        }

        .center_trap nav ul li {
            list-style: none;
            width: 350px;
            height: 142.5px;
            background-color: rgb(221, 220, 220);
            border-radius: 20px;
            margin-bottom: 10px;
            position: relative;
        }

        .center_trap nav ul li img {
            width: 100px;
            height: 100px;
            margin-top: 20px;
            margin-left: 20px;
        }

        .center_trap nav ul li span {
            font-weight: bold;
            position: absolute;
            top: 50%;
            margin-top: -8px;
            left: 150px;
            color: black;
        }

        .center_trap .home_page {
            width: 850px;
            height: 700px;
            position: absolute;
            right: 0;
        }

        .center_trap .home_page #house {
            width: 850px;
            height: 700px;
        }

        .center_trap .home_page #cfx {
            width: 400px;
            height: 300px;
            position: absolute;
            left: 0px;
            bottom: 100px;
            z-index: 999;
        }

        .center_trap .home_page #cf {
            width: 100%;
            height: 100%;
            z-index: 999;
            /* display: none; */
            
        }

        .center_trap .home_page #ktx {
            width: 702px;
            height: 375px;
            position: absolute;
            left: 180px;
            bottom: 102px;
            transform: rotate(-34deg);
            z-index: 999;
        }

        .center_trap .home_page #kt {
            width: 100%;
            height: 100%;
            z-index: 999;
            /* display: none; */
           
        }

        .center_trap .home_page #wsx {
            width: 503px;
            height: 405px;
            position: absolute;
            left: 143px;
            top: 44px;
            transform: rotate(-21deg);
            z-index: 999;
        }


        .center_trap .home_page #ws {
            width: 100%;
            height: 100%;
            z-index: 999;
            /* display: none; */
        }

        
    </style>

</head>

<body>
    <div class="center_trap">
        <nav>
            <a href="index.html">
                <img src="images/首页-选中.png" class="main_page" alt="">
            </a>

            <ul>
                <li>
                    <img src="images/温度.png" alt="">
                    <span>温度：<em id="temE">xx℃</em></span>
                </li>
                <li>
                    <img src="images/湿度.png" alt="">
                    <span>湿度：<em id="humE">xx%RH</em></span>
                </li>
            </ul>
            <div class="kg" id="kg">
                <img src="images/开关 (2).png" class="oc" id="oc" alt="">
                <span>总开关</span>
            </div>

            <input type="text" id="website" style="width:345px">

        </nav>
        <div class="home_page">
            <img src="images/house.jpg" id="house" alt="">
            <div id="cfx">
                <img src="images/黑暗.png" id="cf" alt="">
            </div>
            <div id="ktx">
                <img src="images/黑暗.png" id="kt" alt="">
            </div>

            <div id="wsx">
                <img src="images/黑暗.png" id="ws" alt="">
            </div>
            <!-- <div id="qbx">
                <img src="images/黑暗.png" id="qb" alt="">
            </div> -->
        </div>
    </div>

    <script>
        window.onload = function () {
            var oCfx = document.getElementById('cfx')
            var oCf = document.getElementById('cf')
            var flagcf = 0;
            var website=document.getElementById('website')
            var webaddress='121.43.145.233';
            website.onchange=function(){
                webaddress=website.value;
                console.log(webaddress);
            }
            oCfx.onclick = function (e) {
                if (flagcf) {
                    oCf.style.display = 'block'
                    //http://127.0.0.1:8888/api
                    $.get("http://"+webaddress+":8888/api/?a=off_9")
                    flagcf = 0;
                } else {
                    oCf.style.display = 'none'
                    $.get("http://"+webaddress+":8888/api/?a=on_9")
                    flagcf = 1;
                }
                e.stopPropagation();
            }

            var oKtx = document.getElementById('ktx')
            var oKt = document.getElementById('kt')
            var flagkt = 0;
            oKtx.onclick = function (e) {
                if (flagkt) {
                    oKt.style.display = 'block'
                    $.get("http://"+webaddress+":8888/api/?a=off_27")
                    flagkt = 0;
                } else {
                    oKt.style.display = 'none'
                    $.get("http://"+webaddress+":8888/api/?a=on_27")
                    flagkt = 1;
                }
                e.stopPropagation();
            }

            var oWsx = document.getElementById('wsx')
            var oWs = document.getElementById('ws')
            var flagws = 0;
            oWsx.onclick = function (e) {
                if (flagws) {
                    oWs.style.display = 'block'
                    $.get("http://"+webaddress+":8888/api/?a=off_22")
                    flagws = 0;
                } else {
                    oWs.style.display = 'none'
                    $.get("http://"+webaddress+":8888/api/?a=on_22")
                    flagws = 1;
                }
                e.stopPropagation();
            }


            var oKg=document.getElementById('kg')
            
            var flagkg = 0;
            oKg.onclick=function(e){
                if (flagkg) {
                    oCf.style.display = 'block'
                    oKt.style.display='block'
                    oWs.style.display='block'
                    oc.src="images/开关 (1).png"
                    $.get("http://"+webaddress+":8888/api/?a=off_all")
                    
                    
                    flagkg = 0;

                } else {
                    oCf.style.display = 'none'
                    oKt.style.display='none'
                    oWs.style.display='none'
                    oc.src="images/开关 (2).png"
                    $.get("http://"+webaddress+":8888/api/?a=on_all")
                    
                    
                    flagkg = 1;
                }
                e.stopPropagation();
            }

       
            
                $.get("http://121.43.145.233:8888/api/?a=one", function (data, status) {

                    var tem=Number(data.tem).toFixed(2);
                    var hum=Number(data.hum).toFixed(2);

                    $('#temE').text(tem+"℃")
                    $('#humE').text(hum+"%RH")

                });
    
        }
    </script>


</body>

</html>